.template-list {
    ul {
        display: flex;
        flex-wrap: wrap;

        li {
            width: 230px;
            margin-right: 10px;
            border: 1px solid #ccc;
            margin-bottom: 10px;
            cursor: pointer;

            &:hover {
                border-width: 2px;
                border-color: #2d8cf0;
            }

            &.on {
                border-width: 5px;
                border-color: #2d8cf0;
            }

            &:nth-child(3n) {
                margin-right: 0;
            }

            .img-container {
                width: 100%;
                height: 332px;
                display: flex;
                align-items: center;
                justify-items: center;

                img {
                    max-width: 100%;
                    max-height: 100%;
                }
            }

            .template-name {
                font-size: 18px;
                text-align: center;
            }
        }
    }
}